<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
    <h1>{{ person.name }}{{ person.age }}</h1>
    <input v-model="text" type="text" />
    <h1>{{ text }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated, onMounted } from "vue";
import { useRoute } from "vue-router";
interface p {
  name?: string;
  age?: number;
}
const msg: string = "hello";
const arr: Array<number> = [1, 2, 3, 4, 5, 6];
const person: p = {
  name: "张三",
  age: 10,
};
const text = ref("text");

const route = useRoute();

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
});

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
});

onMounted(() => {
  document.title = route.meta.title as string; // 修改网站标题
});
</script>

<style lang="scss" scoped></style>
